<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shaders</title>
    <meta name="description" content="Shaders">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="shaders/noise.js"></script>
    <script src="shaders/sky.js"></script>
  </head>
  <body>
    <script>
      AFRAME.registerComponent('sun-position-setter', {
        init: function () {
          var skyEl = this.el;
          var orbitEl = this.el.sceneEl.querySelector('#orbit');

          orbitEl.addEventListener('componentchanged', function changeSun (evt) {
            var sunPosition;
            var phi;
            var theta;

            if (evt.detail.name !== 'rotation') { return; }

            sunPosition = orbitEl.getAttribute('rotation');

            if(sunPosition === null) { return; }

            theta = Math.PI * (- 0.5);
            phi = 2 * Math.PI * (sunPosition.y / 360 - 0.5);
            skyEl.setAttribute('material', 'sunPosition', {
              x: Math.cos(phi),
              y: Math.sin(phi) * Math.sin(theta),
              z: -1
            });
          });
        }
      });
    </script>

    <a-scene stats>
      <a-entity id="sky" geometry="primitive: sphere; radius: 100" material="shader: sky; side: back" sun-position-setter>
        <a-entity id="orbit" animation="property: rotation; to: 0 360 0; dur: 5000; loop: true; easing: linear"></a-entity>
      </a-entity>

      <a-entity geometry="primitive: sphere; radius: 3" material="shader: noise" position="0 0 -10" rotation="45 45 0">
      </a-entity>
    </a-scene>
  </body>
</html>
